<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Scrollbar - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        <link href="css/m-scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li class="active"><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li><a href="form-elements.html">Elements</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!--/ nav -->
            </div><!--/ side left-->
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Actions <i class="aweso-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu black">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Some Action</a></li>
                                    <li><a href="#">Other Action</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button class="btn btn-link" data-content="widget"><i class="aweso-list-ul aweso-large" title="details view"></i></button>
                                <button class="btn btn-link" data-content="tile"><i class="aweso-th aweso-large" title="tile view"></i></button>
                            </div>
                        </li>
                        <li><button class="btn btn-link" data-toggle="button" data-content="toggle-pane"><i class="aweso-exchange aweso-large" title="toggle pane"></i></button></li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>Scrollbar</h1></div>

                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-inline">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">Scrollbar</li>
                    </ul>
                </header> <!--/ content header -->
                
                
                <!-- content page -->
                <article class="content-page">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- row #1 -->
                            <div class="row-fluid">
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget border-cyan" id="widget-scrollbar1">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Light</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar1" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                </div> <!-- /span -->
                                
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget border-cyan" id="widget-scrollbar2">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Dark with button</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar2" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="dark" data-button="true" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                    
                                </div> <!-- /span -->
                            </div> <!-- /row #1-->
                            
                            
                            <!-- row #2 -->
                            <div class="row-fluid">
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget bg-cyan" id="widget-scrollbar3">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Light-2 & always show</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar3" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="light-2" data-autohide="false" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                </div> <!-- /span -->
                                
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget border-cyan" id="widget-scrollbar4">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Dark-2 & always show</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar4" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="dark-2" data-autohide="false" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                    
                                </div> <!-- /span -->
                            </div> <!-- /row #2-->
                            
                            
                            <!-- row #3 -->
                            <div class="row-fluid">
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget bg-cyan" id="widget-scrollbar5">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">light-thick</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar5" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="light-thick" data-autohide="false" data-button="true" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                </div> <!-- /span -->
                                
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget border-cyan" id="widget-scrollbar6">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Dark-thick</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar6" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="dark-thick" data-button="true" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                    
                                </div> <!-- /span -->
                            </div> <!-- /row #3-->
                            
                            
                            <!-- row #4 -->
                            <div class="row-fluid">
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget bg-cyan" id="widget-scrollbar7">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">light-thin</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar7" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="light-thin" data-autohide="false" data-button="true" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                </div> <!-- /span -->
                                
                                 <!-- span -->
                                <div class="span6">
                                    <!-- widget scrollbar -->
                                    <div class="widget border-cyan" id="widget-scrollbar8">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget title -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Dark-thick</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action color-cyan">
                                                <button data-toggle="collapse" data-collapse="#widget-scrollbar8" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content" data-scrollbar="mscroll" data-theme="dark-thin" data-button="true" style="height: 260px;overflow: auto;position: relative;">
                                            <h4 class="lead">@bent</h4>
                                            <p>Lorem ipsum dolor sit amet, dolor neque consectetuer, malesuada faucibus, elit molestie ante leo. Aliquam euismod orci venenatis facilisis. Ante tortor ut mollis montes vitae. Urna in velit. Duis a est, quisque ligula erat quam vivamus ac nunc, nisl nulla ut, non turpis in laudantium. Nec massa quis odio curabitur augue, pellentesque posuere auctor.</p>
                                            <p>Maecenas ante faucibus fusce cum ut a, sodales ut nec adipiscing non lorem. Adipiscing id tempor lacinia platea duis, nullam aliquam quibusdam faucibus eget, consectetuer vivamus nec risus vel aliquam, et sed etiam fusce. A laoreet imperdiet, aliquam consequat tortor quis aliquam, viverra nam velit nunc nec, suspendisse varius tellus aliquam integer egestas, sed nisl. Libero ipsum eleifend ultrices augue suspendisse ante, nec irure sapien quam. Elit vestibulum tincidunt ipsum nulla ante, duis suscipit tincidunt, lorem dis integer vel, elit posuere amet etiam erat curabitur.</p>
                                            <p>Non est turpis, quis vestibulum eu eget. Massa venenatis malesuada ut posuere elementum, luctus in ultricies ligula, velit massa ligula rutrum et conubia, eget dui odio volutpat enim sed at, diam consectetuer. Accumsan ut fermentum, vitae non in, lacus porttitor iaculis proin eget aliquam, rhoncus massa nam in aenean. Faucibus tortor ac hac nonummy consequat vitae. Curabitur commodo laoreet in nec, aptent nunc nulla rutrum massa. Class pellentesque fusce nisl, nibh mauris amet nonummy laboris in nisi, fermentum nullam ac. Condimentum egestas anim nec.</p>

                                            <h4 class="lead">@Iin</h4>
                                            <p>Faucibus amet dictum euismod massa in, eu magna, quis etiam in nulla lacinia, mauris ac sit ipsum nunc mi, consequatur sit nullam aliquam eget facilisis. Eros posuere, turpis erat ante pharetra, fusce commodo magnis eros et libero magna, voluptatibus non, mollis orci interdum eget. Duis ante, vel nisl suspendisse maecenas est sit, vestibulum penatibus, lorem cupiditate est. Lobortis ac interdum wisi laudantium ut vehicula. Nunc nostra volutpat quis totam in. Et maecenas condimentum wisi feugiat quam. Mi lacus nulla, nisl tristique dignissim, eleifend ipsum. Quis vitae, condimentum tincidunt, justo amet, quam mauris, ipsum sociis metus. Mollis massa quam. Eget placerat tellus eleifend in eget in, neque faucibus nec aliquam eu, velit sapien rutrum, risus in, dapibus turpis sollicitudin sodales donec. Habitant aliquam ipsum dolor erat convallis phasellus, rutrum suspendisse, semper ante ac nunc aenean, eget amet mus urna quam a qui. Lorem scelerisque magna montes rhoncus, accumsan dolor sodales suspendisse, vestibulum sociis a fermentum vestibulum amet libero, fringilla ac blandit tortor id erat, porta tortor.</p>
                                            <p>Cursus eget nulla nostra tellus sed quis, et urna, adipiscing a. Nullam sit luctus est bibendum, sapien magnis phasellus mus fusce quisque cursus, proin in pellentesque quis. Nunc lorem, risus bibendum, cum laborum justo, ultricies sed metus sit sem. Elit dignissim venenatis. Praesent vel wisi vitae pharetra fusce non, eu ultrices wisi lorem laoreet, imperdiet nec quisque maecenas laoreet, eget urna, eget leo erat orci quis in. Sapien vitae nunc condimentum nam tempor, quam tristique risus neque adipisci, maecenas cursus, augue nunc facilisis pellentesque, fringilla eu integer torquent. Nonummy sodales, eleifend habitant sollicitudin odio fames. Et vivamus maecenas amet wisi quis ac.</p>

                                            <h4 class="lead">one</h4>
                                            <p>Turpis a malesuada ut ut pulvinar eligendi. Molestie ullamcorper aliquam, est consequat habitasse integer amet praesent, eros purus praesent pede mauris vel. At elit est etiam consequat nulla, egestas risus dolor sed sollicitudin rutrum neque, integer augue cras, magna luctus ac lorem. Nulla posuere sed id. Erat quis aenean pretium pede eleifend, sit sit. Magna eget, enim ante sed vulputate bibendum euismod, odio feugiat lacinia sed cras eleifend nulla. Ut maecenas magna dis quis. Nulla felis, eleifend scelerisque magnis sed tempore sit vestibulum, condimentum enim praesent egestas felis mattis, eget lacus sociosqu amet congue. Justo diam id feugiat, a ante, quisque ligula metus amet gravida odio ut, urna rhoncus. Quia quis tellus, mollis tristique ligula, vel sit nostrud in mi enim non.</p>
                                            <p>Metus massa id quam erat a morbi, ea consequat vel vel pulvinar, massa vulputate nulla placerat quam in, in eget class. Mi ut suspendisse integer id, eget justo elit, orci magna et fermentum tellus, diam lacus justo est arcu. Mi sed urna maecenas risus erat volutpat. Lorem tempus scelerisque nec wisi luctus integer, ac amet, sit augue eros elit et. Ornare condimentum purus, ipsum arcu scelerisque proin, mollis felis nec ut erat elit, wisi ut libero illo ac duis. Orci integer vitae nunc sed dui, fusce metus congue massa odio. Magna suscipit in nibh veritatis arcu, sed vestibulum hendrerit accumsan eleifend orci sed, dis suspendisse dui. Lobortis cursus vehicula nunc, dapibus totam. Tempor elit placerat ultricies faucibus phasellus, quis porta dui, dui cras pulvinar. Facilisis sed enim id enim risus quam, cum felis nulla suscipit morbi, lacus interdum at pede etiam nam, quis eu wisi, sed congue mauris leo nec.</p>
                                            <p>Per cras, lorem eget, mi ipsum in, est eu suspendisse aptent vitae amet, eros imperdiet consectetuer rutrum pellentesque volutpat fames. A et consequat fermentum, wisi a enim integer vulputate consectetuer. Ornare ultrices adipiscing inceptos lacus a etiam, fringilla cras sollicitudin mus metus, quam fermentum massa, nunc nunc morbi ut lectus in. Eget tincidunt consequat suscipit etiam taciti, justo diam exercitationem amet massa lectus. Vulputate risus ut eget ornare mauris sed, fringilla sit turpis, omnis sodales enim semper ipsum. Ligula praesent nunc sociis porta aliquam proin, cum dignissim aenean vitae lorem eros pede. Nec placerat vulputate arcu libero, porta justo non, mauris ultrices viverra mi dictum error natoque, nulla accumsan neque velit orci vestibulum quis.</p>

                                            <h4 class="lead">two</h4>
                                            <p>Et semper velit gravida massa phasellus, in tortor phasellus etiam, quas erat, at pede justo nulla gravida nibh. Vitae orci nulla natoque ut. Eu fermentum vitae et, tempus morbi cursus sed, nonummy per in tristique est aliquet vivamus. Vitae lectus ultrices ipsum, phasellus lorem sapien vestibulum sodales nulla dapibus, tellus iaculis quam a. Justo leo, donec torquent vitae massa congue adipiscing, eros metus conubia. Ipsum justo nascetur sociis, aptent massa eu proin, fusce ante. Curabitur sed proin, nascetur amet non eget in viverra, tortor rhoncus faucibus est, felis mus, magna mauris aliquam lacus. Elit ut urna tempus vel. Suscipit quam fringilla augue nibh dictum curabitur, donec in mauris, vestibulum quisque. Odio quam amet eleifend nam mattis, viverra risus, eu justo augue nec aenean leo nulla, tempus luctus aliquet ipsum viverra. Curabitur magna, in lacus sed pulvinar nec, vestibulum porttitor integer, proin ut ornare in nunc iaculis, morbi ligula.</p>
                                            <p>Vestibulum odio in lacus in quisque, pulvinar non vel, vestibulum nisl eu tellus ut sapien. Excepturi mauris diam sodales eget aliquam montes, nunc nullam ipsum nam enim, in magna viverra orci pharetra. Rutrum vestibulum id. Scelerisque nonummy vestibulum sem ipsum enim duis, egestas eu ultrices nec ligula aenean, massa enim, sit eros maecenas vivamus nunc sed curabitur, tempor arcu fermentum mi nisl quis. Proin condimentum duis, in nibh fringilla duis, erat quis, sollicitudin venenatis leo aut vestibulum dui. Orci nonummy ullamcorper, mollis vel lectus. Nunc etiam ipsum mi senectus nec vestibulum, lectus dolor augue sed auctor, ut dis accumsan dolor non urna, repudiandae maecenas lorem congue amet vitae condimentum, quam tortor molestie sem. Quisque in, integer ultrices pretium laoreet blandit. Ut metus eget curae ut sollicitudin molestie, erat enim sed ultricies. Odio dui ut, duis ligula donec integer vestibulum ornare, ut vehicula quam tellus ipsum arcu. Congue et malesuada velit erat libero, leo nonummy pellentesque, vel nostra nulla, interdum posuere sed nunc vitae nunc. Wisi curae congue.</p>

                                            <h4 class="lead">three</h4>
                                            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                                            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget scrollbar -->
                                    
                                </div> <!-- /span -->
                            </div> <!-- /row #4-->
                            
                        </div><!-- /content-inner-->
                    </div><!-- /main-page-->
                    
                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/m-scrollbar/jquery.mCustomScrollbar.min.js"></script>
        
        <!-- metro js, required! -->
        <script type="text/javascript" src="js/metro-base.js"></script>
        
        <!-- demo js -->
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript">
            $(function(){
                'use strict';
                
                $('.syncronize .themes-choice > a, .unsyncronize .themes-navbar > a').on('click', function(e){
                    e.preventDefault();
                    var theme = $(this).attr('data-theme');
                    
                    $.each($('.widget'), function(){
                        var widget = $(this),
                        widget_header = widget.find('.widget-header'),
                        widget_action = widget.find('.widget-action');
                        
                        if(widget.is('[class*="border-"]')){
                            widget.attr('class', 'widget border-'+theme) // widget border
                        }
                        if(widget.is('[class*="bg-"]')){
                            widget.attr('class', 'widget bg-'+theme) // widget theme bgcolor
                        }
                        if(widget_header.is('[class*="bg-"]')){
                            widget_header.attr('class', 'widget-header bg-'+theme) // widget header
                        }
                        if(widget_action.is('[class*="color-"]')){
                            widget_action.attr('class', 'widget-action color-'+theme) // widget action
                        }
                    })
                })
            })
        </script>
    </body>
</html>
